<template>
  <!-- 未登录导航栏 -->
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      v-show="sessionLogin === null || sessionLogin === '0'"
      style="width: 90%;left: 5%"
  >
    <el-menu-item index="0"><el-image :src="LOGO" style="border-radius: 10px"/></el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="1"><el-icon><HomeFilled /></el-icon>Home</el-menu-item>
    <el-menu-item index="2"><el-icon><Edit /></el-icon>Note</el-menu-item>
    <el-menu-item index="3"><el-icon><Reading /></el-icon>Learn</el-menu-item>
    <el-menu-item index="4"><el-icon><UserFilled /></el-icon>Person</el-menu-item>
    <el-menu-item index="5" :style="Style">Log in</el-menu-item>
    <el-menu-item index="6" :style="Style">Reg in</el-menu-item>
  </el-menu>
  <!-- 登录后的导航栏 -->
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      style="width: 90%;left: 5%"
      :locale="locale"
      v-show="sessionLogin !== null && sessionLogin !== '0'"
  >
    <el-menu-item index="0">LOGO</el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="1"><el-icon><HomeFilled /></el-icon>Home</el-menu-item>
    <el-menu-item index="2"><el-icon><Edit /></el-icon>Note</el-menu-item>
    <el-menu-item index="3"><el-icon><Reading /></el-icon>Learn</el-menu-item>
    <el-menu-item index="4"><el-icon><UserFilled /></el-icon>Person</el-menu-item>
    <el-sub-menu index="5">
      <template #title>More</template>
      <el-menu-item index="5-1" @click="outLogin">
        <el-button style="width: 100%;" type="warning" plain><el-icon><Warning /></el-icon>Out Log</el-button>
      </el-menu-item>
      <el-menu-item index="5-2" @click="closeUser">
        <el-button style="width: 100%;" type="danger" plain><el-icon><CircleClose /></el-icon>Close Log</el-button>
      </el-menu-item>
      <el-menu-item index="5-3" @click="chinese">
        <el-button style="width: 100%;" plain>中英互换</el-button>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
// 表单基本构造
import {computed, onMounted, ref, watch} from 'vue'
import {CircleClose, Edit, HomeFilled, Reading, UserFilled, Warning} from "@element-plus/icons-vue";
import router from "@/router";
import {loginStatusStore} from '@/stores/counter'
import {OutLogin, CloseUser} from "@/api";
import {ElMessage, ElNotification} from "element-plus";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import logo from '@/assets/img/LOGO/facebook_cover_photo_1.png'
const activeIndex = ref('1')
// 强调登录注册按钮
const Style = ref({border: '1px solid black', borderRadius: '5%', marginLeft: '1%'})
// 登录状态 
const sessionLogin = sessionStorage.getItem('LoginStore')
// 登录状态的改变变换路由
const store = loginStatusStore()
// LOGO图片载入
const LOGO = logo
// 选择时进行操作
const handleSelect = (key, keyPath) => {
  // 选择时进行改变路由
  switch (keyPath[0]){
    case "1":
      router.replace({name:'home'});
      console.log("欢迎来到主页");
      break;
    case "2":
      router.replace({name:'note'});
      console.log("欢迎来到笔记页");
      break;
    case "3":
      router.replace({name:'learn'});
      console.log("欢迎来到学习页");
      break;
    case "4":
      router.replace({name:'my'});
      break;
    case "5":
      if (store.logStatus === 0){
        router.replace({name:'login'});
        console.log("欢迎登录");
      }
      console.log("更多选项")
      break;
    case "5-1":
      console.log("执行退出登录");
      break;
    case "5-2":
      console.log("执行注销用户");
      break;
    case "6":
      if (store.logStatus === 0){
        router.replace({name:'register'});
        console.log("欢迎注册");
      }
      break;
    default:
      console.log("出错！");
  }
}
// 退出登录
function outLogin() {
  OutLogin().then((res) => {
    console.log(res)
    ElNotification({title: '退出登录', message: '退出登录成功！', type: 'success'})
    sessionStorage.removeItem("token")
    sessionStorage.removeItem("username")
    sessionStorage.removeItem("password")
    sessionStorage.removeItem("phone")
    sessionStorage.removeItem("email")
    if (sessionStorage.getItem("token")===null) {
      store.logStatus = 0
      sessionStorage.setItem('LoginStore',store.logStatus)
    }
  })
}
// 注销用户
function closeUser() {
  CloseUser().then((res) => {
    console.log(res)
    ElNotification({title: '注销用户', message: '注销用户成功！', type: 'success',})
    sessionStorage.removeItem("token")
    sessionStorage.removeItem("username")
    sessionStorage.removeItem("password")
    sessionStorage.removeItem("phone")
    sessionStorage.removeItem("email")
    if (sessionStorage.getItem("token")===null) {
      store.logStatus = 0
      sessionStorage.removeItem("LoginStore")
    }
  })
}
// 中英转化
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
const chinese = () => {language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
